<template>
  <uv-button
    @click="tapBtn"
    :color="$CONFIG.SUN_BASE_COLOR"
    :custom-style="customStyle"
    v-bind="$attrs"
  >
    <slot></slot>
  </uv-button>
</template>

<script setup>
const props = defineProps({
  btnWidth: {
    type: String,
    default: '630rpx',
  },
  btnHeight: {
    type: String,
    default: '88rpx',
  },
  borderRadius: {
    type: String,
    default: '',
  },
  styles: {
    type: Object,
    default: () => {
      return {};
    },
  },
  url: {
    type: String,
    default: "",
  },
  jumpType: {
    type: String,
    default: "navigateTo",
  },
});
const customStyle = {
  ...{
    width: props.btnWidth,
    height: props.btnHeight,
    borderRadius: props.borderRadius ? props.borderRadius : '20rpx',
  },
  ...props.styles,
};
const emits = defineEmits(['click']);
const tapBtn = () => {
  if (props.url) {
    switch (props.jumpType) {
      case "navigateTo":
        uni.navigateTo({
          url: props.url,
        });
        break;
      case "redirectTo":
        uni.redirectTo({
          url: props.url,
        });
        break;
      case "switchTab":
        uni.switchTab({
          url: props.url,
        });
        break;
      case "reLaunch":
        uni.reLaunch({
          url: props.url,
        });
        break;
      default:
        uni.navigateTo({
          url: props.url,
        });
    }
  } else {
    emits('click');
  }
};
</script>

<style scoped></style>
